<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>账号管理 - 雁农冷链平台</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../static/sa.css">
	<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
	<style>
		.account-container {
			padding: 20px;
			background: #f5f5f5;
			min-height: calc(100vh - 40px);
		}
		.account-card {
			background: white;
			border-radius: 8px;
			padding: 24px;
			margin-bottom: 20px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		}
		.profile-header {
			display: flex;
			align-items: center;
			margin-bottom: 30px;
			padding-bottom: 20px;
			border-bottom: 1px solid #eee;
		}
		.avatar-section {
			margin-right: 30px;
		}
		.avatar {
			width: 80px;
			height: 80px;
			border-radius: 50%;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 32px;
			font-weight: bold;
		}
		.user-info h3 {
			margin: 0 0 8px 0;
			color: #333;
			font-size: 24px;
		}
		.user-info p {
			margin: 4px 0;
			color: #666;
		}
		.form-section {
			margin-bottom: 30px;
		}
		.section-title {
			font-size: 18px;
			font-weight: bold;
			color: #333;
			margin-bottom: 20px;
			padding-bottom: 10px;
			border-bottom: 2px solid #409eff;
		}
		.form-row {
			display: flex;
			gap: 20px;
			margin-bottom: 20px;
		}
		.form-item {
			flex: 1;
		}
		.form-item label {
			display: block;
			margin-bottom: 8px;
			color: #333;
			font-weight: 500;
		}
		.form-item input, .form-item select {
			width: 100%;
			padding: 10px 12px;
			border: 1px solid #ddd;
			border-radius: 4px;
			font-size: 14px;
		}
		.form-item input:focus, .form-item select:focus {
			border-color: #409eff;
			outline: none;
			box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
		}
		.btn-group {
			text-align: center;
			padding-top: 20px;
		}
		.btn {
			padding: 10px 24px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 14px;
			margin: 0 10px;
			transition: all 0.3s;
		}
		.btn-primary {
			background: #409eff;
			color: white;
		}
		.btn-primary:hover {
			background: #66b1ff;
		}
		.btn-default {
			background: #f5f5f5;
			color: #666;
			border: 1px solid #ddd;
		}
		.btn-default:hover {
			background: #e6e6e6;
		}
		.security-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px 0;
			border-bottom: 1px solid #f0f0f0;
		}
		.security-item:last-child {
			border-bottom: none;
		}
		.security-info {
			flex: 1;
		}
		.security-info h4 {
			margin: 0 0 5px 0;
			color: #333;
		}
		.security-info p {
			margin: 0;
			color: #999;
			font-size: 12px;
		}
		.btn-link {
			color: #409eff;
			text-decoration: none;
			padding: 5px 10px;
			border-radius: 4px;
			transition: all 0.3s;
		}
		.btn-link:hover {
			background: #f0f8ff;
		}
	</style>
</head>
<body>
	<div id="app" class="account-container">
		<!-- 个人信息卡片 -->
		<div class="account-card">
			<div class="profile-header">
				<div class="avatar-section">
					<div class="avatar">{{ userInfo.name.charAt(0) }}</div>
				</div>
				<div class="user-info">
					<h3>{{ userInfo.name }}</h3>
					<p><i class="el-icon-user"></i> {{ userInfo.role }}</p>
					<p><i class="el-icon-phone"></i> {{ userInfo.phone }}</p>
					<p><i class="el-icon-message"></i> {{ userInfo.email }}</p>
				</div>
			</div>
			
			<!-- 基本信息编辑 -->
			<div class="form-section">
				<div class="section-title">基本信息</div>
				<div class="form-row">
					<div class="form-item">
						<label>姓名</label>
						<input type="text" v-model="userInfo.name" placeholder="请输入姓名">
					</div>
					<div class="form-item">
						<label>性别</label>
						<select v-model="userInfo.gender">
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
					</div>
				</div>
				<div class="form-row">
					<div class="form-item">
						<label>手机号码</label>
						<input type="tel" v-model="userInfo.phone" placeholder="请输入手机号码">
					</div>
					<div class="form-item">
						<label>邮箱地址</label>
						<input type="email" v-model="userInfo.email" placeholder="请输入邮箱地址">
					</div>
				</div>
				<div class="form-row">
					<div class="form-item">
						<label>公司名称</label>
						<input type="text" v-model="userInfo.company" placeholder="请输入公司名称">
					</div>
					<div class="form-item">
						<label>部门职位</label>
						<input type="text" v-model="userInfo.position" placeholder="请输入部门职位">
					</div>
				</div>
			</div>
		</div>
		
		<!-- 安全设置卡片 -->
		<div class="account-card">
			<div class="section-title">安全设置</div>
			<div class="security-item">
				<div class="security-info">
					<h4>登录密码</h4>
					<p>定期更换密码可以提高账号安全性</p>
				</div>
				<a href="#" class="btn-link" @click="changePassword">修改密码</a>
			</div>
			<div class="security-item">
				<div class="security-info">
					<h4>手机绑定</h4>
					<p>已绑定手机：{{ userInfo.phone }}</p>
				</div>
				<a href="#" class="btn-link" @click="changePhone">更换手机</a>
			</div>
			<div class="security-item">
				<div class="security-info">
					<h4>邮箱绑定</h4>
					<p>已绑定邮箱：{{ userInfo.email }}</p>
				</div>
				<a href="#" class="btn-link" @click="changeEmail">更换邮箱</a>
			</div>
			<div class="security-item">
				<div class="security-info">
					<h4>登录日志</h4>
					<p>查看最近的登录记录和设备信息</p>
				</div>
				<a href="#" class="btn-link" @click="viewLoginLog">查看日志</a>
			</div>
		</div>
		
		<!-- 操作按钮 -->
		<div class="account-card">
			<div class="btn-group">
				<button class="btn btn-primary" @click="saveProfile">保存修改</button>
				<button class="btn btn-default" @click="resetForm">重置</button>
			</div>
		</div>
	</div>
	
	<script src="../../static/kj/vue.min.js"></script>
	<script src="../../static/kj/element-ui/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					userInfo: {
						name: '张三',
						gender: '男',
						phone: '138****8888',
						email: 'zhangsan@example.com',
						company: '雁农冷链科技有限公司',
						position: '供应链经理',
						role: '供应商用户'
					},
					originalInfo: {}
				}
			},
			mounted() {
				// 保存原始数据用于重置
				this.originalInfo = JSON.parse(JSON.stringify(this.userInfo));
			},
			methods: {
				saveProfile() {
					// 验证表单
					if (!this.userInfo.name.trim()) {
						this.$message.error('请输入姓名');
						return;
					}
					if (!this.userInfo.phone.trim()) {
						this.$message.error('请输入手机号码');
						return;
					}
					if (!this.userInfo.email.trim()) {
						this.$message.error('请输入邮箱地址');
						return;
					}
					
					// 模拟保存
					this.$message.success('个人信息保存成功');
					this.originalInfo = JSON.parse(JSON.stringify(this.userInfo));
				},
				resetForm() {
					this.userInfo = JSON.parse(JSON.stringify(this.originalInfo));
					this.$message.info('已重置为原始信息');
				},
				changePassword() {
					this.$message.info('密码修改功能开发中...');
				},
				changePhone() {
					this.$message.info('手机更换功能开发中...');
				},
				changeEmail() {
					this.$message.info('邮箱更换功能开发中...');
				},
				viewLoginLog() {
					this.$message.info('登录日志查看功能开发中...');
				}
			}
		});
	</script>
</body>
</html>